<template>
  <div class="template-source-box">
    <div class="template-source-box-top">
      <div class="ds-top-search">
        <el-input
          placeholder="请输入查询内容……"
          suffix-icon="el-icon-search"
          size="mini"
          @change="(val) => searchTemplate(val)"
          v-model="keywordName"
        ></el-input>
      </div>
    </div>
    <div class="template-source-box-con">
      <div class="list" v-if="dataSourceList && dataSourceList.length > 0">
        <template v-for="(item, idx) in dataSourceList">
          <div class="list-item-box" :key="idx">
            <!-- <img :src="item.filePath" style="height: 100px; width: 100px" /> -->
            <div class="imgBox" v-if="item.filePath">
              <el-popover placement="right" trigger="hover">
                <img
                  slot="reference"
                  :src="item.filePath"
                  style="width: 150px; height: 150px"
                />
                <img :src="item.filePath" style="height: 600px; width: 450px" />
              </el-popover>
            </div>
            <div class="list-item">
              <div class="list-item-desc">
                <el-tag>{{ item.nameCn }}</el-tag>
                <div
                  style="font-size: 12px; margin-top: 10px; text-indent: 10px"
                  v-if="item.describeCn"
                >
                  描述： {{ item.describeCn }}
                </div>
              </div>
              <div class="list-item-operation">
                <el-button
                  type="text"
                  icon="el-icon-edit-outline"
                  v-if="item.originType === 3"
                  @click="editDataSource(item, idx)"
                ></el-button>
                <el-button
                  type="text"
                  icon="el-icon-download"
                  @click="loadTemplate(item)"
                ></el-button>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  @click="deleteItem(item)"
                ></el-button>
              </div>
            </div>
          </div>
        </template>
        <el-pagination
          small
          layout="prev, pager, next"
          @current-change="currentChange"
          @size-change="sizeChange"
          :total="total"
        >
        </el-pagination>
      </div>
      <div v-else class="no-dataSource">暂无数据</div>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/applicationManage/applicationManage";
import { debounce } from "@/utils/util";

export default {
  name: "template-source-box",
  components: {},
  props: {
    designer: Object,
    width: String,
    loadTempLate: Function,
  },
  data() {
    return {
      dataSourceList: [],
      page: {
        pageSize: 10,
        currentPage: 1,
      },
      total: 0,
      keywordName: "",
    };
  },
  methods: {
    searchTemplate(val) {
      this.templatePage(val);
    },
    initPage() {
      this.page = {
        pageSize: 10,
        currentPage: 1,
      };
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.templatePage();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.templatePage();
    },
    templatePage(name) {
      const params = {
        current: this.page.currentPage,
        pageSize: this.page.pageSize,
      };
      if (name) {
        params.nameCn = name;
      }
      api
        .templatePage({
          ...params,
        })
        .then((res) => {
          this.dataSourceList = res.data.data.list;
          this.total = res.data.data.totalRows;
        });
    },
    loadTemplate(data) {
      this.$confirm("加载模板会覆盖原有节点，是否加载？").then(() => {
        this.loadTempLate(data.json);
        this.$message.success("加载成功");
      });
    },
    deleteItem(data) {
      const that = this;
      // this.designer.dataSource.splice(idx, 1);
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.templateDel({ id: data.oid }).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            that.page = {
              pageSize: 10,
              currentPage: 1,
            };
            that.templatePage();
          });
        })
        .catch(() => {});
    },
    initTemplate() {
      this.initPage();
      this.templatePage();
    },
  },
  mounted() {
    this.initTemplate();
  },
};
</script>

<style scoped lang="scss">
.template-source-box {
  width: 100%;
  height: 100%;
  $dsbtH: 45px;
  .template-source-box-top {
    width: 100%;
    min-height: $dsbtH;

    .ds-top-search {
      width: calc(100% - 20px);
      padding: 10px 10px 10px 5px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      ::v-deep .el-input {
        border-radius: 10px;

        .el-input__inner {
          border-radius: 40px;
        }
      }
    }

    .ds-top-btn {
      .el-button {
        padding: 5px 8px;
      }
    }

    .ds-top-filter {
      padding: 5px 0;

      > span {
        margin-right: 10px;
        cursor: pointer;
      }
    }
  }

  .template-source-box-con {
    width: calc(100% - 10px);
    height: calc(100% - #{$dsbtH});
    overflow-y: scroll;
    overflow-x: hidden;

    &::-webkit-scrollbar {
      width: 0;
    }

    .list {
      width: 100%;
      height: calc(100% - 40px);
      .list-item-box {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 5px 10px;
        box-sizing: border-box;
        margin-bottom: 5px;
        .imgBox {
          text-align: center;
          margin-bottom: 5px;
        }
      }
      .list-item {
        width: 100%;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        .list-item-desc {
          flex: 1;
        }
        .list-item-operation {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-wrap: nowrap;

          .el-button {
            padding: 0;
          }
        }
      }
    }

    .no-dataSource {
      text-align: center;
      font-size: 13px;
      line-height: 300px;
      color: #999999;
    }
  }
  ::v-deep .el-pagination {
    text-align: right;
    padding: 18px 0;
  }
}
</style>
